import { BoxIcon, CoinsIcon } from "lucide-react";
import { useState } from "react";
import Divider from "~/components/ui/divider";
import Title from "~/components/ui/title";
import type { IFunc } from "~/types/manage/system/config";
import { cn } from "~/utils/ui.util";
import ExpensesBoard from "./manage/channel/coin/expenses-board";
import RevenueBoard from "./manage/channel/coin/revenue-board";
import Empty from "./manage/system/empty";

const FUNC_LIST: IFunc[] = [
  {
    key: "revenue-board",
    title: (
      <div className="flex items-center gap-2">
        月收益看板
        <CoinsIcon className="text-green-400" size={18} />
      </div>
    ),
    desc: "渠道月收益明细",
    component: <RevenueBoard />,
  },
  {
    key: "expenses-board",
    title: (
      <div className="flex items-center gap-2">
        月支出看板
        <CoinsIcon className="text-red-400" size={18} />
      </div>
    ),
    desc: "月支出明细",
    component: <ExpensesBoard />,
  },
];

export default function Page() {
  const [selectKey, setSelectKey] = useState<React.Key | null>(null);

  return (
    <div className="flex h-full w-full gap-4">
      <div className="flex h-full w-[180px] flex-col gap-4">
        <Title title="收益管理" />
        <div className="flex flex-1 flex-col gap-2 overflow-auto">
          {FUNC_LIST.map((item) => {
            return (
              <div
                key={item.key}
                className={cn(
                  "group/item flex cursor-pointer flex-col gap-1 rounded px-2 py-2",
                  {
                    "bg-gray-200": selectKey === item.key,
                    "hover:bg-gray-100": selectKey !== item.key,
                  },
                )}
                title={item.key}
                onClick={() => {
                  setSelectKey(item.key);
                }}
              >
                <div className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
                  {item.title}
                </div>
                <div className="text-sm text-gray-400">{item.desc}</div>
              </div>
            );
          })}
        </div>
      </div>
      <Divider />
      <div className="flex flex-1 flex-col gap-4 overflow-hidden">
        {(selectKey &&
          FUNC_LIST.find((item) => item.key === selectKey)?.component) || (
          <Empty icon={BoxIcon} title="请选择左侧功能进行操作" />
        )}
      </div>
    </div>
  );
}
